<template>
  <div id="main">
    <Mheader title="注册账号" />
    <el-row>
        <el-col :span='23'>
           <el-form label-width="80px" :rules='rules' :model='formData'>
              <el-form-item label='用户名:' prop='un'>
                <el-input type="text" v-model='formData.un'></el-input>
              </el-form-item>
              <el-form-item label='密码:' prop='pw'>
                <el-input type="password" v-model='formData.pw'></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type='success' @click="registerHander">注册</el-button>
              </el-form-item>
           </el-form>
        </el-col>
     </el-row>
    <!-- <Mfooter /> -->
  </div>
</template>

<script>
import Mheader from "@/components/Mheader";
// import Mfooter from "@/components/Mfooter";
import Register from "@/components/Register";
export default {
  name: "Register",
  components: {
    Mheader,
    // Mfooter,
    Register,
  },
  data(){
    return {
      formData:{
        un:'',
        pw:''
      },
      rules:{
        un:[
          {required:true,message:'用户名必须输入'},
          {min:2,max:8,message:'用户名必须是3到8个字符'}
        ],
        pw:[
          {required:true,message:'密码必须输入'},
          {min:2,max:8,message:'密码必须是3到8个字符'}
        ]
      }
    }
  },
  methods:{
    async registerHander(){
      let data = await this.$axios.post('/users/regist',{
        username:this.formData.un,
        password:this.formData.pw
      })
      console.log(data);
      if(data.code===0){
        this.$message({
          message: '注册成功',
          type: 'success'
        });
        this.$router.push('/mine')
      }else{
        this.$message({
          message: '用户名已存在'
        });
      }
    }
  }
};
</script>

<style scoped>
#main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: #ffffff;
  min-height: 100%;
}
#content .login_body{  width:100%;}
.login_body .login_text{ width:100%; height: 40px; border:none; border-bottom: 1px #ccc solid; margin-bottom: 5px; outline: none; text-indent: 10px;}
.login_body .login_btn{ height:50px; margin:10px;}
.login_body .login_btn input{ width:100%; height:100%; background:#e54847; border-radius: 3px; border:none; display: block; color:white; font-size: 20px;}
.login_body .login_link{ display: flex; justify-content:space-between;}
.login_body .login_link a{ text-decoration: none; margin:0 5px; font-size: 12px; color:#e54847;}

.el-row .el-button{width: 100%;}
.el-col-23{margin-top: 20px;}
</style>


